<template>
    <div>
        <el-table :data="tableData" border style="width: 100%" class="list">
            <el-table-column prop="id" label="用户id" width="70"></el-table-column>
            <el-table-column prop="account" label="账号" width="150"></el-table-column>
            <el-table-column prop="password" label="密码"></el-table-column>
            <el-table-column prop="status" label="状态" width="70"></el-table-column>
            <el-table-column label="操作" width="70">
                <template slot-scope="scope">
                    <el-button size="small" @click="$emit('change',scope.$index)">编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="70">
                <template slot-scope="scope">
                    <el-popover placement="bottom" width="160" trigger="click">
                        <p>确定删除吗？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini" type="text" >取消</el-button>
                            <el-button type="primary" size="mini" @click="$emit('del',scope.row)">确定</el-button>
                        </div>
                        <el-button
                        size="small"
                        type="danger"
                        slot="reference"
                        style="position:relative;z-index=2"
                    >删除</el-button>
                    </el-popover>
                    
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: "AdminList",
    props: ["adminList"],
    computed: {
        tableData: function() {
            let arr=[];
            this.adminList.forEach((item) => {
                let _item={...item};
                if (_item.status == 1) {
                    _item.status = "正常";
                } else if (_item.status == 0) {
                    _item.status = "停用";
                }
                arr.push(_item);
                
            });
            return arr;
        }
    },
    methods: {
        handleEdit(index, row) {
            alert(index, row);
        }
    }
};
</script>

<style lang="scss" scoped>
.list {
    height: 70vh;
    overflow-y: scroll;
    &::before {
        display: none;
    }
}
</style>